<template>
  <div id='tree' ref='tree'></div>
</template>

<script>

import FamilyTree from '@balkangraph/familytree.js'

export default {
  name: 'tree',
  data() {
    return {
     nodes: [
        { id: 1, pids: [3], name: '毛福梅', gender: 'female', img:'https://tse1-mm.cn.bing.net/th/id/R-C.8a085806fa06a6697f8bc7da7c737320?rik=HVh2S7vY6DgTQw&riu=http%3a%2f%2fupload.wikimedia.org%2fwikipedia%2fcommons%2f4%2f4a%2fMao_Fumei.jpg&ehk=8wwpseb1hxB6p2aRh3wPmS5A7Az67fFzCa%2b5P%2f9Uxas%3d&risl=&pid=ImgRaw&r=0'},
        { id: 2, fid:12, pids: [1,13],  name: '蒋介石', gender: 'male', img: 'https://img2.baidu.com/it/u=871384074,2973299943&fm=253&fmt=auto&app=138&f=JPEG?w=446&h=478' },
        { id: 3, mid: 1, fid: 2, pids:[15,16], name: '蒋经国', gender: 'male', img: 'https://img0.baidu.com/it/u=1685187632,1011141091&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=387' },
        { id: 4, fid: [2], name: '蒋纬国', gender: 'male', img: 'https://img0.baidu.com/it/u=1866174012,3651246692&fm=253&fmt=auto&app=138&f=JPEG?w=348&h=480' },
        { id: 5, fid: 3, name: '蒋孝文', gender: 'male', img: 'https://th.bing.com/th/id/OIP.HdBEF_K2qOCPlLLJDmOxtQDYEg?w=135&h=180&c=7&r=0&o=5&pid=1.7' },
        { id: 6, fid: 4, name: '蒋孝刚', gender: 'male', img: 'https://th.bing.com/th/id/OIP.4gM-VYid8GLcFphb_t1bhgAAAA?w=125&h=177&c=7&r=0&o=5&pid=1.7' },
        { id: 7, fid: 5, name: '蒋友梅', gender: 'male', img: 'https://th.bing.com/th/id/OIP.EZdm5f638_yzkS9ynQBeIQHaKM?w=124&h=180&c=7&r=0&o=5&pid=1.7' },
        { id: 8, fid: 6, name: '蒋友捷', gender: 'male', img: 'https://th.bing.com/th/id/OIP.SHp8FnYg5JBzsRlITMeGjAAAAA?w=145&h=180&c=7&r=0&o=5&pid=1.7' },
        { id: 9, fid: 6, name: '蒋友娟', gender: 'female', img: '' },
        { id: 10, fid: 11, name: '宋庆龄', gender: 'female', img: 'https://th.bing.com/th/id/OIP.DQz0qsWQYUF6FVGDFIwkfgAAAA?w=169&h=212&c=7&r=0&o=5&pid=1.7' },
        { id: 11, name: '宋嘉树', gender: 'male', img: 'https://th.bing.com/th/id/OIP.hkZkgPDRWFxU4DMNkwNyugAAAA?w=150&h=99&c=7&r=0&o=5&pid=1.7'},
        { id: 12, name: '蒋肇聪', gender: 'male', img: 'https://th.bing.com/th/id/OIP.3zT7pJ5hJksykf6G9O0t_gHaHG?w=191&h=183&c=7&r=0&o=5&pid=1.7'},
        { id: 13, fid:11, pids: [2], name: '宋美龄', gender: 'female', img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.CTKms1WE_rFOWOGgsNtqugAAAA?w=166&h=206&c=7&r=0&o=5&pid=1.7'},
        { id:14, fid:3, name:'蒋孝章',gender:'male',img:'' },
        { id:15, pids:[3], name:'蒋方良',gender:'female', img:'https://tse4-mm.cn.bing.net/th/id/OIP-C.9oG8MlSd0opnw-lFs1rkjAHaJJ?w=126&h=166&c=7&r=0&o=5&pid=1.7' }, 
        { id:16, pids:[3], name:'章亚诺',gender:'female', img:'https://tse4-mm.cn.bing.net/th/id/OIP-C.SxTDIDu-K6PdwnX77yYkaQAAAA?w=228&h=180&c=7&r=0&o=5&pid=1.7' }, 
        { id:17, fid:3, pids:[], name:'蒋孝武',gender:'male',img:'' }, 
        { id:18, fid:3, pids:[], name:'蒋孝勇',gender:'male',img:'' }, 
        { id:19, fid:3, pids:[], name:'蒋孝严',gender:'male',img:'' }, 
        { id:20, fid:3, pids:[], name:'蒋孝慈',gender:'male',img:'https://ts1.cn.mm.bing.net/th?id=OIP-C.8AD95KaZyi6hCNLfjoibBwAAAA&w=121&h=170&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2' }, 
        { id:21, fid:17, pids:[], name:'蒋友松',gender:'male',img:'https://ts1.cn.mm.bing.net/th?id=OIP-C.up0jlXE6nBAwu6Re0lpvfAAAAA&w=127&h=170&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2' }, 
        { id:22, fid:17, pids:[], name:'蒋友兰',gender:'female',img:'' }, 
        { id:23, fid:18, pids:[], name:'蒋友柏',gender:'male',img:'https://tse1-mm.cn.bing.net/th/id/OIP-C.CAH-_gQ3_3_HRawTZ4xg_AHaKK?w=128&h=180&c=7&r=0&o=5&pid=1.7' }, 
        { id:24, fid:18, pids:[], name:'蒋友常',gender:'male',img:'https://bkimg.cdn.bcebos.com/pic/ac345982b2b7d0a20d195e4dcbef76094a369a09?x-bce-process=image/resize,m_lfit,w_536,limit_1/format,f_jpg' }, 
        { id:25, fid:18, pids:[], name:'蒋友青',gender:'male',img:'https://ts1.cn.mm.bing.net/th?id=OIP-C._TyBKXRrPRLdQTzQ-EHd5wHaHa&w=170&h=170&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2' }, 
        { id:26, fid:19, pids:[], name:'蒋万安',gender:'male',img:'https://bkimg.cdn.bcebos.com/pic/d833c895d143ad4bd113191aeb534dafa40f4afba892?x-bce-process=image/resize,m_lfit,w_536,limit_1/format,f_jpg' }, 
        { id:27, fid:19, pids:[], name:'蒋惠兰',gender:'female',img:'' }, 
        { id:28, fid:19, pids:[], name:'蒋惠筠',gender:'female',img:'' }, 
        { id:29, fid:20, pids:[], name:'蒋劲菊',gender:'female',img:'' }, 
        { id:30, fid:20, pids:[], name:'蒋劲松',gender:'male',img:'https://img2.baidu.com/it/u=634637786,1751396621&fm=253&fmt=auto&app=138&f=JPEG?w=460&h=650' }, 
        
     ]
   }
  },
   methods: {
     mytree: function (domEl, x) {
       this.family = new FamilyTree(domEl, {
         nodes: x,
         nodeBinding: {
           field_0: 'name',
           img_0: 'img',
           sp_0: '生平'
         },
       nodeTreeMenu: true
     })
    }
   },
   mounted() {
     this.mytree(this.$refs.tree, this.nodes)
   }
}
</script>

<style scoped>
</style>
<style scoped>
.window {
   width: 100%;
   height: 100vh;
}
</style>